﻿@model List<Category>
@{
    ViewData["Title"] = "Categories";
    bool showAll = ViewBag.ShowAll;
}

<h2 class="mt-2 mb-3">@ViewData["Title"]</h2>

<div class="table-wrapper">
    <table class="data-table table table-sm table-striped" style="width:auto">
        <thead>
            <tr role="row">
                <th scope="col" class="sortable searchable">ID</th>
                <th scope="col" class="sortable searchable">sort</th>
                <th asp-show-if="showAll" scope="col" class="sortable searchable">cid</th>
                <th scope="col" class="sortable searchable">name</th>
                <th scope="col" class="sortable searchable">color</th>
                <th scope="col" class="sortable">visible</th>
                <th scope="col" class="sortable">eligible</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var cat in Model)
            {
                <tr asp-action="Detail" asp-route-catid="@cat.Id" style="background:@cat.Color" role="row" data-target="gotoUrl">
                    <td use-a>@cat.Id</td>
                    <td use-a>@cat.SortOrder</td>
                    <td asp-show-if="showAll" data-order="@(cat.ContestId ?? -1)" use-a>@(cat.ContestId.HasValue ? $"c{cat.ContestId.Value}" : "all")</td>
                    <td use-a>@cat.Name</td>
                    <td use-a>@cat.Color</td>
                    <td use-a>@(cat.IsPublic ? "yes" : "no")</td>
                    <td use-a>@(cat.IsEligible ? "yes" : "no")</td>
                    <td><a asp-action="Edit" asp-route-catid="@cat.Id" title="edit this category"><i class="fas fa-edit"></i></a></td>
                    <td><a asp-action="Delete" asp-route-catid="@cat.Id" data-toggle="ajaxWindow" title="delete this category"><i class="fas fa-trash-alt"></i></a></td>
                </tr>
            }
        </tbody>
    </table>
</div>

<div class="d-none" id="all-switcher-src">
    <div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
        <a asp-route-showAll="false" class="btn btn-outline-secondary @(showAll ? "" : "active")">Common</a>
        <a asp-route-showAll="true" class="btn btn-outline-secondary @(showAll ? "active" : "")">All</a>
    </div>
</div>

<script>
    $().ready(function () {
        $('.data-table').DataTable({
            "paging": false,
            "searching": true,
            "ordering": true,
            "order": [[1, 'asc']],
            "info": false,
            "autoWidth": true,
            "language": {
                "searchPlaceholder": "filter table",
                "search": "_INPUT_",
            },
            'aoColumnDefs': [
                { aTargets: ['sortable'], bSortable: true },
                { aTargets: ['searchable'], bSearchable: true },
                { aTargets: ['_all'], bSortable: false, bSearchable: false }
            ],
        });

        $('.dataTables_wrapper .row:first-child .col-md-6:first-child').html($('#all-switcher-src').html());
    });
</script>

<p>
    <a asp-action="Add" class="btn btn-primary" title="Add new category"><i class="fas fa-plus"></i>&nbsp;Add new category</a>
</p>
